<!-- 费用详情 -->
<template>
  <div class="cost-detail">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow" :boolean="boolean"></top-header>

    <div class="cost-list">
      <!-- 费用详情List -->
      <van-cell-group>
        <van-cell title="客户单位:" :value="costList.cust_name" />
        <van-cell title="合同名称:" :value="costList.pact_name" />
        <van-cell title="联系人:" :value="costList.linkManName" />
        <van-cell title="派单人:" :value="costList.deliverMan" />
        <van-cell title="联系电话:" :value="costList.phone" />
        <van-cell title="客户地址:" :value="costList.address" />
        <van-cell title="办公地点:" :value="costList.tasksAddress" />
        <van-cell title="软件版本:" :value="costList.version" />
        <van-cell title="优先级:" :value="costList.priority" />
        <van-cell title="服务类型:" :value="costList.type" />
        <van-cell title="上门日期:" :value="costList.svr_date" />
        <van-cell title="上门时间:" :value="costList.svr_time" />
        <van-cell title="预算时长:" :value="costList.lengthTime" />
        <van-cell title="时限:" :value="costList.deadline" />
        <van-cell title="难度系数:" :value="costList.degreeDifficulty" />
        <van-cell title="费用类别:" :value="costList.costTypeName" />
        <van-cell title="交通费:" :value="costList.costTotal" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
export default {
  name: 'CostDetail',
  components: {
    TopHeader
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      boolean: true, // 顶部标题组件返回按钮是否能够点击
      costList: {}
    }
  },
  created () {
    this.costList = this.$route.params
  }
}
</script>

<style scoped lang="less">
.cost-detail {
  width: 100%;
  height: 100%;
  .cost-list {
    height: calc(100% - 1.2rem);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
